<template>
<!--  父子组件之间的通信：它是属于数据的传递
  父传子：父组件把数据传递给子组件 在子组件里面通过属性的方式引用父组件的数据
  子传父：子组件把数据通过事件的方式传递给父组件使用
  父子组件之间不能相互访问data内容-->
    <div class="sidebarSon">
      <button @click="add(2)">+</button>
      <button @click="parentAdd()">++</button>
      <span>{{msg}}-- {{title}}--{{product}}</span>
      <ul>
        <li v-for="item in news" :key="item.id">{{item.title}}</li>
      </ul>
      子组件计数：{{sonNum}}
      <input type="text" ref="demo">
    </div>
<!--  父子组件之间的相互访问方式：这是方法的调用
        父组件调用子组件的方法来完成对子组件的操作$refs
        子组件调用父组件的方法来完成对父组件的操作$parent或$root
-->



</template>

<script>
export default {
  name: "ContentSon",
  // 父传子：父组件把数据传递给子组件 在子组件里面通过属性的方式引用父组件的数据 props
  props:{
    title:{
      type:String
    },
    news:{
      type:Array
    },
    //缺省
    product:{
      type:String,
      default:'缺省值'
    }
  },
  data(){
    return{
      msg:'content son的内容',
      sonNum:20
    }
  },
  methods:{
    add(num){
      //子传父：子组件把数据通过事件的方式传递给父组件使用 $emit
      this.$emit('sonCount',num);
    },
    //子组件的方法
    parentAdd(){
      //调用父主键的addCount()方法
      this.$parent.addCount();
      //调用根组件的addRootNum()方法
      this.$root.addRootNum();
    },
    //子组件自己的sub()方法
    sub(){
      this.sonNum--;
    }
  },
  beforeUnmount() {
    console.log('ContentSon组件实例销毁之前beforeUnmount');
  },
  unmounted() {
    console.log('ContentSon组件实例销毁完成unmounted');
  },
  activated() {
    console.log('ContentSon组件keep-alive 缓存的组件激活时调用activated');
    // 延迟执行
    this.$nextTick(()=>{
      this.$refs.demo.focus();
    })
  },
  deactivated() {
    console.log('ContentSon组件keep-alive 缓存的组件停用时调用deactivated');
  },
}
</script>

<style scoped>
    .sidebarSon{
      width: 80%;
      height: auto;
      background: orange;
      margin-top: 5px;
    }
    ul li{
      list-style: none;
    }
</style>